<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div>
                    <el-input size="small" v-model="menuName" placeholder="菜单名称"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div>
                    <el-button type="success" size="small" round>
                        <icon class="el-icon-search"/>
                        搜索
                    </el-button>
                    <el-button type="danger" size="small" round @click="openAdd">
                        <icon class="el-icon-plus"/>
                        新增
                    </el-button>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple"></div>
            </el-col>
        </el-row>

        <div style="padding-top: 20px">
            <el-table
                    :data="menuList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    size="mini"
                    :default-expand-all="false"
                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="menuName"
                        label="菜单名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="orderNum"
                        label="排序"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="menuUrl"
                        label="路由">
                </el-table-column>
                <el-table-column
                        label="类型">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.menuType === 1">菜单</el-tag>
                        <el-tag  v-if="scope.row.menuType === 0">目录</el-tag>
                    </template>
                </el-table-column>
                <el-table-column>
                    <el-button type="danger" size="mini" icon="el-icon-delete" plain></el-button>
                    <el-button  type="primary" size="mini" icon="el-icon-edit" plain></el-button>
                </el-table-column>
            </el-table>
        </div>

        <!--添加弹出框-->
        <el-dialog title="添加菜单" :visible.sync="dialogAdd" center width="40%">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="菜单类型">
                    <el-radio-group v-model="ruleForm.menuType" @change="changeMenuView(ruleForm.menuType)">
                        <el-radio :label="1">菜单</el-radio>
                        <el-radio :label="0">目录</el-radio>
                    </el-radio-group>
                </el-form-item>
                <div v-show="muluView">
                    <el-form-item label="目录名称" prop="name">
                        <el-input size="small" v-model="ruleForm.menuName"></el-input>
                    </el-form-item>
                    <el-form-item label="目录图标">
                        <el-select v-model="ruleForm.menuIcon" style="width: 100%" size="small" placeholder="请选择">
                            <el-option
                                    v-for="items in iconList"
                                    :key="items.iconCode"
                                    :value="items.iconCode"
                            >
                                <el-icon :class="items.iconCode"></el-icon>
                                <span>&nbsp;&nbsp;{{items.iconName}}</span><span>&nbsp;&nbsp;{{items.iconCode}}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number size="small" v-model="ruleForm.orderNum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                    </el-form-item>
                </div>
                <div v-show="caidanView">
                    <el-form-item label="上级菜单">
                        <el-button style="width: 100%" size="small" @click="getMenus"><span style="text-align: left"><span v-show="nextMenuShow">上级菜单</span><span v-show="clickMenuShow">{{nodeName}}</span></span></el-button>
                    </el-form-item>
                    <el-form-item label="菜单名称" prop="name">
                        <el-input size="small" v-model="ruleForm.menuName"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单图标">
                        <el-select v-model="ruleForm.menuIcon" style="width: 100%" size="small" placeholder="请选择">
                            <el-option
                                    v-for="items in iconList"
                                    :key="items.iconCode"
                                    :value="items.iconCode"
                            >
                                <el-icon :class="items.iconCode"></el-icon>
                                <span>&nbsp;&nbsp;{{items.iconName}}</span><span>&nbsp;&nbsp;{{items.iconCode}}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item size="small" label="菜单路由" prop="name">
                        <el-input v-model="ruleForm.menuUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单排序">
                        <el-input-number size="small" v-model="ruleForm.orderNum" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                    </el-form-item>
                </div>

                <el-form-item>
                    <el-button size="small" type="primary" @click="addMenu">添加</el-button>
                    <el-button size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-dialog
                title="上级菜单"
                :visible.sync="testLog"
                width="20%"
                center
                modal
                :destroy-on-close="true">
                <el-tree
                        :accordion="true"
                        :data="newTree"
                        :props="defaultProps"
                        ref="tree"
                        @node-click="handleNodeClick"
                ></el-tree>
            <span slot="footer" class="dialog-footer">
    <el-button @click="getNodeNO" size="small">取 消</el-button>
    <el-button type="primary" @click="getNodeOK" size="small">确 定</el-button>
  </span>
        </el-dialog>


    </div>
</template>

<script>
    export default {
        name: "menu",
        data() {
            return {
                menuList:[],
                newTree: [],
                routeTree: [],
                testLog: false,
                dialogAdd: false,
                dialogIcon: false,
                caidanView:true,
                muluView:false,
                ruleForm: {
                    menuName:'',
                    menuType: '',
                    menuIcon: '',
                    orderNum: '',
                    menuParentId: '',
                    menuUrl: '',
                },
                iconList: [
                    {
                        iconCode: 'el-icon-delete',
                        iconName: '删除'
                    },
                    {
                        iconCode: 'el-icon-user',
                        iconName: '用户'
                    },
                    {
                        iconCode: 'el-icon-loading',
                        iconName: '加载'
                    },
                ],
                welcomeReport: '',
                defaultProps: {
                    label: 'menuName',
                    children: 'children',
                },
                nextMenuShow:true,
                clickMenuShow:false,
            };
        },

        created(){
            this.menuList = this.$store.getters.routes;
        },

        methods: {
            changeMenuView(value){
                if (this.ruleForm.menuType === 0){
                    this.caidanView = false
                    this.muluView = true
                }else {
                    this.muluView  = false
                    this.caidanView = true
                }
                console.log("测试目录-- "+value)
            },

            getNodeNO(){
                this.testLog = false;
            },
            getNodeOK(){
                this.testLog = false;
                this.nextMenuShow = false;
                this.clickMenuShow = true;
            },

            getMenus() {
                this.testLog = true
            },

            handleNodeClick(nodeSelect) {
                this.ruleForm.menuParentId = nodeSelect.id;
                this.nodeName = nodeSelect.menuName;
            },

            //打开菜单添加框
            openAdd() {
                this.dialogAdd = true;
                const route = this.$store.getters.routes;
                let tree = {
                    id:0,
                    menuName:'顶级菜单',
                    children: route
                }
                const array = [];
                array.push(tree);
                this.newTree = array
            },

            //添加菜单
            addMenu() {
                this.$store.dispatch('addMenuAction', this.ruleForm).then(() => {

                }).catch(() => {

                })
            }
        },

    }
</script>

<style scoped>

</style>